//登录
<template>
  <div class="login">
    <!-- 头部 -->
    <div class="head">
      <div class="right">
        <p>
          <span>{{ time }}</span>
        </p>
      </div>
    </div>
    <!-- 登录框 -->
    <div class="bg">
      <div class="study">
        <h2>在线英语学习系统</h2>
        <p class="grey">Hi 欢迎您的到来</p>
        <!-- <form>
          <input type="text" name="username" placeholder="用户名/账号"/>
          <input type="password" name="password" placeholder="请输入您的密码" />
        </form> -->
        <el-form ref="form" :model="form">
          <el-form-item>
            <el-input v-model="form.account" placeholder="请输入用户名"></el-input>
            <img src="../assets/my.png" />
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            <img src="../assets/mima.png" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForms()" class="button">点击登录</el-button>
          </el-form-item>
          <div class="autoLogin">
            <el-checkbox v-model="checked" style="color: #a0a0a0">记住密码</el-checkbox>
            <span @click="clearCookie()" style="cursor: pointer; font-size: 0.75rem; margin-left: 5px">忘记密码？</span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import {
    login
  } from '@/api/index'
  export default {
    data() {
      return {
        time: "2021-05-11 14:38",
        form: {
          account: "",
          password: "",
        },
        checked: true,
        msg: "",
      };
    },
    methods: {
      //点击登录调用方法
      submitForms() {
        //保存的账号
        var name = this.form.account;
        //保存的密码
        var pass = this.form.password;

        if (name == "" || name == null) {
          this.$message.error("请输入正确的用户名");
          return;
        } else if (pass == "" || pass == null) {
          this.$message.error("请输入正确的密码");
          return;
        } else {

          login(this.form).then((response) => {
            console.log(response);
            localStorage.setItem("token", response.data.token)
            this.$router.push({
              path: '/index'
            })
          })
          // axios
          //   .post("http://en.test.1demo.cc/api/Site/login", {
          //     account: name,
          //     password: pass
          //   })
          //   .then((res) => {
          //     console.log(res.data.data.token)});

          // localStorage.removeItem("Authorization");
          //  this.$router.push("/Index")
          // console.log(name)
          // axios.create({
          //   baseURL: "http://en.test.1demo.cc/",
          //   timeout: 10000, // 请求超时时间
          // });
          // axios.interceptors.request.use(
          //   (config) => {
          //     config.headers["token"] = localStorage.getItem("token");
          //     return config;
          //   },
          //   (error) => {
          //     // 请求报错时的操作
          //     // // console.log(error) // for debug
          //     return Promise.reject(error);
          //   }
          // );

          // axios
          //   .post("api/Site/login", {
          //     account: name,
          //     password: pass
          //   })
          //   .then((res) => {
          //     console.log(res.data.data.token);

          //     // res.data
          //     localStorage.setItem("token", res.data.data.token),
          //       // console.log(localStorage.setItem);

          //       (this.msg = res.data.msg);
          //     if (this.msg == "登录成功") {
          //       // _this.userToken = "Bearer " + res.data.data.body.token;
          //       // console.log(_this.userToken)
          //       // 将用户token保存到vuex中
          //       // _this.changeLogin({ Authorization: _this.userToken });

          //       this.$router.push("/Index");
          //     }
          //   });
        }

        if (this.checked == true) {
          this.setCookie(name, pass, 100);
        }
        //接口
        //   var url='myserver/user/login';
        //   this.$http.post(url,this.form,{emulateJSON:true})
        //    .then(res=>{
        // if(this.body=="fail"){
        //  alert("用户名或密码错误,请重新输入");
        //  this.form.userName='';
        //  this.form.password='';
        //  return
        // } else{
        // // alert（"登陆成功！"）
        //  this.$router.push("/index")
        // }
        //  });
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie =
          "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie =
          "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: function () {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split("="); //再次切割
            //判断查找相对应的值
            if (arr2[0] == "userName") {
              this.form.account = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == "userPwd") {
              this.form.password = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        this.$router.push("/Forget");
      },
    },
    //页面加载调用获取cookie值
    mounted() {
      this.getCookie(); // chrome
      document.body.scrollTop = 0;
      // firefox
      document.documentElement.scrollTop = 0;
      // safari
      window.pageYOffset = 0;
      localStorage.setItem("get", 0);
    },
  };

</script>
<style lang="scss" scoped>
  .login {
    width: 100%;

    .head {
      width: 100%;
      height: 40px;
      line-height: 40px;

      .right {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;

        p {
          float: right;
          width: 10%;
        }

        span {
          color: #333333;
          margin-right: 16%;
        }
      }
    }

    .bg {
      width: 100%;
      padding: 16rem 0;
      background: url("../assets/bg.png") no-repeat center center;
      background-size: 100% 100%;

      .study {
        width: 18%;
        padding: 1.8rem 2%;
        border-radius: 15px;
        margin: 0 auto;
        background-color: #fff;

        .grey {
          color: #999999;
          font-size: 14px;
          margin-top: 0.4rem;
        }

        .el-form {
          margin-top: 1.4rem;

          .el-form-item {
            position: relative;

            img {
              position: absolute;
              left: 0;
              top: 0.9rem;
              width: 6%;
            }
          }

          .el-input {
            // background: #f8f8f8;
            border-radius: 6px;
            // width: 100%;
            // height: 50px;
            // line-height: 50px;
            margin-top: 0.5rem;
            // color: #c5c5c5;
            // font-size: 16px;
            text-indent: 1em;
          }

          /deep/ .el-input__inner {
            border: 0 !important;
          }

          button {
            width: 100%;
            margin: 0.8rem 0;
          }

          .autoLogin {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }

</style>
